<template>
  <div class="cart-container">
    <div class="cart-content">
      <div class="cart-header">
        <h1 class="cart-title">
          <i class="iconfont icon-gouwuche"></i>
          我的购物车
        </h1>
        <div class="cart-summary">
          <span class="item-count">{{ carts.length }} 件商品</span>
        </div>
      </div>
      
      <div v-if="carts.length === 0" class="empty-cart">
        <div class="empty-icon">
          <i class="iconfont icon-gouwuche"></i>
        </div>
        <h2 class="empty-title">购物车是空的哦</h2>
        <p class="empty-desc">快去挑选心仪的商品吧</p>
        <router-link to="/" class="shop-now-btn">
          <i class="iconfont icon-shangcheng"></i>
          立即购物
        </router-link>
      </div>
      
      <div v-else class="cart-items">
        <div v-for="cart in carts" :key="cart.id" class="cart-item-wrapper">
          <cart-item :cart="cart" @delete="delItem"></cart-item>
        </div>
        
        <div class="cart-footer">
          <div class="cart-total">
            <span class="total-label">总计：</span>
            <span class="total-price">￥{{ totalPrice }}</span>
          </div>
          <el-button type="primary" size="large" class="checkout-btn" @click="checkoutAll">
            <i class="iconfont icon-zhifu"></i>
            结算全部
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CartItem from "@/components/CartItem";
export default {
  name: "Cart",  
  data(){
    return{
      userId: Number,
      carts: [],
    }
  },
  components:{
    'cart-item': CartItem,
  },
  computed: {
    totalPrice() {
      return this.carts.reduce((total, cart) => {
        const realPrice = cart.price * cart.discount;
        return total + (realPrice * cart.count);
      }, 0).toFixed(2);
    }
  },
  created() {
    this.request.get("/userid").then(res=> {
      this.userId = res;
      this.request.get("/api/cart/userid/"+this.userId).then(res=>{
        if(res.code==='200'){
          this.carts = res.data;
          for(var i = 0; i < this.carts.length; ++i) {
            this.carts[i].createTime = this.carts[i].createTime.toLocaleString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
          }
        }
      })
    })
  },
  methods:{
    delItem(id){
      this.carts = this.carts.filter(item => item.id != id)
    },
    checkoutAll() {
      if (this.carts.length === 0) {
        this.$message.warning('购物车为空，无法结算');
        return;
      }
      // 批量结算所有商品，跳转到预下单页面
      const goods = this.carts.map(cart => ({
        id: cart.goodId,
        name: cart.goodName,
        imgs: cart.img,
        discount: cart.discount,
        realPrice: (cart.price * cart.discount).toFixed(2),
        num: cart.count,
        standard: cart.standard,
        cartId: cart.id
      }));
      this.$router.push({
        path: '/preorder',
        query: {
          goods: JSON.stringify(goods)
        }
      });
    }
  },
}
</script>

<style scoped>
.cart-container {
  min-height: 100vh;
}

.cart-content {
  max-width: 100%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  height: 100vh;
}

/* 购物车头部 */
.cart-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 30px;
  color: white;
  text-align: center;
  position: relative;
  border-radius: 20px;
}

.cart-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
}

.cart-title {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  position: relative;
  z-index: 1;
}

.cart-title i {
  font-size: 36px;
  color: #ffffff;
}

.cart-summary {
  position: relative;
  z-index: 1;
}

.item-count {
  font-size: 16px;
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

/* 空购物车样式 */
.empty-cart {
  padding: 80px 40px;
  text-align: center;
  background: #ffffff;
}

.empty-icon {
  margin-bottom: 30px;
}

.empty-icon i {
  font-size: 80px;
  color: #ddd;
  opacity: 0.5;
}

.empty-title {
  font-size: 28px;
  color: #666;
  margin: 0 0 15px 0;
  font-weight: 500;
}

.empty-desc {
  font-size: 16px;
  color: #999;
  margin: 0 0 40px 0;
}

.shop-now-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.shop-now-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
  color: white;
  text-decoration: none;
}

.shop-now-btn i {
  font-size: 18px;
}

/* 购物车商品列表 */
.cart-items {
  background: #ffffff;
  padding: 30px;
}

.cart-item-wrapper {
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.cart-item-wrapper:hover {
  transform: translateY(-2px);
}

.cart-item-wrapper:last-child {
  margin-bottom: 0;
}

/* 购物车底部 */
.cart-footer {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eee;
}

.cart-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.total-label {
  font-size: 18px;
  color: #666;
  font-weight: 500;
}

.total-price {
  font-size: 28px;
  color: #e74c3c;
  font-weight: 700;
}

.checkout-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.checkout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

.checkout-btn i {
  font-size: 18px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .cart-content {
    margin: 10px;
    border-radius: 15px;
  }
  
  .cart-header {
    padding: 20px;
  }
  
  .cart-title {
    font-size: 24px;
  }
  
  .cart-title i {
    font-size: 28px;
  }
  
  .cart-items {
    padding: 20px;
  }
  
  .cart-footer {
    padding: 20px;
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .empty-cart {
    padding: 60px 20px;
  }
  
  .empty-title {
    font-size: 24px;
  }
}
</style>